<template>
    <div class="star" :class="'star-' + size">
        <span class="star-item" v-for="(sc, index) in starClasses" :key="index" :class="sc"></span>
    </div>
</template>

<script>
export default {
    props: {
        score: Number, //分数
        size: Number //尺寸
    },
    computed: {
        starClasses() {
        /**
         * on全星，half半星，off无星，小数部分>=0.5就是半星
         * 3.2 3个on 0个half 2个off
         * 3.5 3个on 1个half 1个off
         */
            const {score} = this;
            const scs = [];
            
            //向scs中添加n个on
            const scoreIntegger = Math.floor(score)
            for(let i = 0; i < scoreIntegger; i++) {
                scs.push("on")
            }
            //向scs中添加0或1个half
            if((score*10 - scoreIntegger*10) >= 5) {
                //*10是为了避免小数计算不精确
                scs.push("half")
            }
            //向scs中添加0或n个off
            while(scs.length < 5) {
                scs.push("off")
            }
            return scs;
        }
    }
};
</script>
<style lang="stylus" scoped>
@import "../../common/stylus/mixins.styl"
.star //2x图 3x图
    float left
    font-size 0
    .star-item
        display inline-block
        background-repeat no-repeat
    &.star-48
        .star-item
            width 20px
            height 20px
            margin-right 22px
            background-size 20px 20px
            &:last-child
                margin-right: 0
            &.on
                bg-image('./images/star48_on')
            &.half
                bg-image('./images/star48_half')
            &.off
                bg-image('./images/star48_off')
    &.star-36
        .star-item
            width 15px
            height 15px
            margin-right 6px
            background-size 15px 15px
            &:last-child
                margin-right 0
            &.on
                bg-image('./images/star36_on')
            &.half
                bg-image('./images/star36_half')
            &.off
                bg-image('./images/star36_off')
    &.star-24
        .star-item
            width 10px
            height 10px
            margin-right 3px
            background-size 10px 10px
            &:last-child
                margin-right 0
            &.on
                bg-image('./images/star24_on')
            &.half
                bg-image('./images/star24_half')
            &.off
                bg-image('./images/star24_off')
</style>